Button mouseover color change

  • Example 1

    1. html

    
                      <section class="gallery">      
                
                                
                                <ul class="nav nav-tabs">
                                      <li class="active"><a data-toggle="tab" href="#gal1">Video <br>
                                        Gallery</a></li>
    
                                      <li><a data-toggle="tab" href="#gal2">Image <br>
                                        Gallery</a></li>
    
                                      <li><a data-toggle="tab" href="#gal3">Testimonial <br>
                                        Portfolio</a></li>
                                </ul>
                            
                      
                        </section>
    
                    

    2. css

    
    
    
    .gallery .nav-tabs {
    	border: none;
    	text-align: right;
    	padding: 0;
    }
    .gallery .nav-tabs > li {
    	float: none;
    	margin: 0 0 3px 0;
    	padding: 0;
    	display: inline-block;
    }
    
    
    
    .gallery .nav-tabs > li > a {
    	font-size: 12px;
      text-decoration:none;
    	font-weight: 500;
    	letter-spacing: 1px;
    	color: #fff;
    	margin: 0;
    	line-height: 24px;
    	border: 0px solid #5aa306;
    	background: #dcdcdc;
    	padding: 7px 20px;
    	text-transform: uppercase;
    	border-radius: 0;
    	display: inline-block;
    	z-index: 9;
    	-webkit-transition: .4s;
    	-moz-transition: .4s;
    	-o-transition: .4s;
    	transition: .4s;
    
      
    }
    
    
    .gallery .nav-tabs > li > a br {
    	  display: none;
    }
    
    .gallery .nav > li > a:focus:before, .gallery .nav > li > a:hover:before {
    	  width: 100%;
    }
    
    .gallery .nav-tabs > li.active > a:before {
    	  width: 100%;
    }
    
    .gallery .nav > li > a:focus, .gallery .nav > li > a:hover {
        background-color: red;
        border-color: #ff8e00;
        color: #fff;
       
    }
    
    
  • Example 2

    1. HTML

    
                    <a href="#" class="slidebtn  wow slideInRight animated" data-wow-delay=".8s" style="visibility: visible; animation-delay: 0.8s; animation-name: slideInRight;">Read More</a>
    
    

    2. CSS

    
    
    .slidebtn {
      width: 140px;
      font-size: 15px;
      text-align: center;
      font-weight: 600;
      line-height: 42px;
      margin: 0;
      letter-spacing: .4px;
      padding: 0;
      border-radius: 25px;
      display: block;
      background: #fff;
      color: #fe5b94;
      -webkit-transition: .4s;
      -moz-transition: .4s;
      -o-transition: .4s;
      transition: .4s;
      -webkit-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
      visibility: visible !important;
      -webkit-animation-name: slideInRight !important;
      -moz-animation-name: slideInRight !important;
      -o-animation-name: slideInRight !important;
      animation-name: slideInRight !important;
    }
    .slidebtn:hover, .slidebtn:focus {
      background: #fe5b94;
      color: #ffffff;
    }